<template>
  <div class="ContactOurModule">
    <el-card>
      <div class="table-wrap">
        <el-table
          :data="tableData"
          border
          style="width: 100%;">
          <el-table-column
            prop="name"
            label="PV">
          </el-table-column>
          <el-table-column
            prop="address"
            label="UV">
          </el-table-column>
          <el-table-column
            prop="name"
            label="'立即拨打'按钮点击量">
          </el-table-column>
          <el-table-column
            prop="date"
            label="跳出率">
          </el-table-column>
        </el-table>
      </div>
      <div class="select-wrap">
        <div class="select-box box">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in buttonArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <!--<el-button-group style="height: 44px">-->
          <!--<el-button-->
          <!--:type="checkedButton===item.value?'primary':''"-->
          <!--@click="checkButton(item)"-->
          <!--:key="item.value"-->
          <!--v-for="(item,index) in buttonArr">{{item.label}}</el-button>-->
          <!--</el-button-group>-->
        </div>
        <div class="time-box box">
          <el-date-picker
            v-model="timeValues"
            @change="changeTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            :range-separator="$t('bidding.to')"
            :start-placeholder="$t('bidding.startTime')"
            :end-placeholder="$t('bidding.endTime')">
          </el-date-picker>
        </div>
      </div>
      <div class="eCharts-wrap">
        <div class="echarts-part">
          <div class="title">走势图</div>
          <div class="nodata" v-if="showNoData.lineECharts">No Data</div>
          <div class="chart lineECharts"  v-loading="loading.lineECharts"></div>
        </div>
        <div class="echarts-part">
          <div class="title">用户分布图</div>
          <div class="nodata" v-if="showNoData.barECharts">No Data</div>
          <div class="chart barECharts"  v-loading="loading.barECharts"></div>
        </div>
      </div>
      <div class="table-wrap-two">
        <el-table
          :data="tableData2"
          border
          style="width: 100%;">
          <el-table-column
            type="index"
            width="30">
          </el-table-column>
          <el-table-column
            prop="name"
            label="PV">
          </el-table-column>
          <el-table-column
            prop="address"
            label="UV">
          </el-table-column>
          <el-table-column
            prop="name"
            label="'立即拨打'按钮点击量">
          </el-table-column>
          <el-table-column
            prop="date"
            label="跳出率">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  export default {
    name: "ContactOurModule",
    data() {
      return {
        testPort: '',
        buttonArr:[
          {label:'PV',value:'PV'},
          {label:'UV',value:'UV'},
          {label:'"立即拨打"按钮点击量',value:'"立即拨打"按钮点击量'},
          {label:'跳出率',value:'跳出率'},
        ],
        checkedButton:'PV',
        timeValues:[],
        echartsObj: {
          lineECharts:'',
          barECharts:'',
        },
        loading:{
          lineECharts:false,
          barECharts:false
        },
        showNoData:{
          lineECharts:false,
          barECharts:false
        },
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        show: '1',
        value: '',
        tableData2: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],

      }
    },
    methods:{
      initEchartsDom() {
        this.echartsObj.lineECharts = this.echarts.init(document.getElementsByClassName('lineECharts')[0], null, {renderer: 'canvas'})
        this.echartsObj.barECharts = this.echarts.init(document.getElementsByClassName('barECharts')[0], null, {renderer: 'canvas'})
      },
      checkButton(item){
        this.checkedButton=item.value;
      },
      changeTime(){

      },
      //  echarts-module
      async getDataEchartsLine(params) {
        this.loading.lineECharts = true
        let res = await this.axios.post(`${this.testPort}/itemwinrateprd/winBoDistribution`, params)
        let resData = res.data.data
        setTimeout(()=>{
          this.loading.lineECharts = false
          this.drawEcharts(resData, '#5EC7F6', 'lineECharts', this.echartsObj.lineECharts, 'line', true)
        },0)
      },
      async getDataEchartsBar(params) {
        this.loading.barECharts = true
        let res = await this.axios.post(`${this.testPort}/itemwinrateprd/winBoDistribution`, params)
        let resData = res.data.data
        setTimeout(()=>{
          this.loading.barECharts = false
          this.drawEcharts(resData, '#5EC7F6', 'barECharts', this.echartsObj.barECharts, 'bar', false)
        },0)
      },
      drawEcharts(paramsData, color, noData, echartsObj,echartsType,isSmooth) {
        if (JSON.stringify(paramsData) !== "{}") {
          let xAxisData = ['0≤X<20%','20%≤X<40%','40%≤X<60%','60%≤X<80%','80%≤X≤100%']
          let data = paramsData.win
          let option = {
            grid: {
              left: '3%',
              right: '3%',
              bottom: '3%',
              containLabel: true
            },
            color: color,
            xAxis: {
              type: 'category',
              axisTick: {
                show: false
              },
              axisLine: {
                // show: false
              },
              axisLabel: {
                interval: 0,
                fontFamily: 'HelveticaNeue',
                fontSize: 10,
                color: '#999999'
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                fontFamily: 'HelveticaNeue',
                fontSize: 10,
                color: '#999999'
              },
              axisLine: {
                // show: false
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            },
            tooltip: {
              confine: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            series: [{
              data: data,
              type: echartsType,
              smooth: isSmooth,
              barMaxWidth: 30
            }]
          }
          this.showNoData[noData] = false
          echartsObj.clear()
          echartsObj.setOption(option)
        } else {
          echartsObj.clear()
          this.showNoData[noData] = true
        }
      },
      loadAllCharts(){
        this.getDataEchartsLine({});
        this.getDataEchartsBar({});
      },
      echartsResize(){
        setTimeout(() => {
          this.echartsObj.lineECharts.resize()
          this.echartsObj.barECharts.resize()
        },200)
      },
    },
    computed: {
      ...mapGetters(['sidebar'])
    },
    watch: {
      'sidebar.opened': function () {
        this.echartsResize()
      }
    },
    mounted(){
      this.initEchartsDom();
      this.loadAllCharts();
      window.onresize = () => {
        this.echartsResize()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ContactOurModule{
    /*padding: 20px;*/
    .nodata{
      width: 100%;
      height: 100%;
      text-align:center;
      position: relative;
      top:100px;
      z-index:1;
    }
    .table-wrap{}
    .button-wrap {
      margin-top: 20px;
      .box{
        display: inline-block;
      }
      .button-box{
        margin-right: 15px;
      }
    }
    .eCharts-wrap{
      .echarts-part{
        margin-top:20px;
        .title{
          font-family: PingFang-SC-Bold;
          font-size: 20px;
          color: #151515;
          line-height: 24px;
        }
        .chart{
          width:100%;
          height:35vh;
        }
      }
    }
    .select-wrap {
      margin-top: 20px;
      .box{
        display: inline-block;
      }
      .select-box{
        margin-right: 15px;
      }
    }
    .table-wrap-two{
      margin-top: 15px;
    }
  }
</style>
